<template>
  <!-- 页面主容器，包含整个页面的内容 -->
  <div class="containerIndex">
    <!-- 欢迎信息区域，显示欢迎语和当前时间 -->
    <div class="welcome">
      <p>
        <!-- 显示欢迎登录的用户名，用户名从 Vuex 存储中获取 -->
        <span>欢迎: {{admin}} 登录</span>
        <!-- 显示当前时间 -->
        <span>当前时间: {{time}}</span>
      </p>
    </div>
    <!-- 统计信息区域，展示商品、用户、评论和交易额的统计数据 -->
    <div class="Statistics">
      <!-- 统计信息区域的标题 -->
      <p>统计</p>
      <!-- 无序列表，用于展示各项统计数据 -->
      <ul>
        <!-- 列表项，显示商品总量 -->
        <li>
          <div>商品总量</div>
          <!-- 显示商品总量的具体数值 -->
          <p>{{DataNum.productTotalNum}}</p>
        </li>
        <!-- 列表项，显示用户总数 -->
        <li>
          <div>用户总数</div>
          <!-- 显示用户总数的具体数值 -->
          <p>{{DataNum.userTotalNum}}</p>
        </li>
        <!-- 列表项，显示评论数 -->
        <li>
          <div>评论数</div>
          <!-- 显示评论数的具体数值 -->
          <p>{{DataNum.commentTotalNum}}</p>
        </li>
        <!-- 列表项，显示交易额 -->
        <li>
          <div>交易额</div>
          <!-- 显示交易额的具体数值 -->
          <p>{{DataNum.moneyTotalNum}}</p>
        </li>
      </ul>
    </div>
    <!-- 系统信息区域，展示系统的相关信息 -->
    <div class="Statistics">
      <!-- 系统信息区域的标题 -->
      <p>系统信息</p>
      <!-- 表格容器 -->
      <div class="tabLine">
        <!-- 表格，用于展示系统信息 -->
        <table class="tabcont">
          <!-- 表格行，显示系统版本信息 -->
          <tr>
            <td>系统版本</td>
            <td>Microsoft Windows 10 Home</td>
          </tr>
          <!-- 表格行，显示服务地址信息 -->
          <tr>
            <td>服务地址</td>
            <td>192.168.22.254:9999</td>
          </tr>
          <!-- 表格行，显示 MySQL 版本信息 -->
          <tr>
            <td>MySQL 版本</td>
            <td>MySQL v8.0</td>
          </tr>
          <!-- 表格行，显示运行环境信息 -->
          <tr>
            <td>运行环境</td>
            <td>Node v16,Apache Tomcat 9.0,Vue v2.9.6</td>
          </tr>
          <!-- 表格行，显示 Java JDK 信息 -->
          <tr>
            <td>Java JDK</td>
            <td>JDK 1.8</td>
          </tr>
          <!-- 表格行，显示后端框架信息 -->
          <tr>
            <td>后端框架</td>
            <td>SpringBoot,Mybatis</td>
          </tr>
          <!-- 表格行，显示前端框架信息 -->
          <tr>
            <td>前端框架</td>
            <td>Vue,ElementUI</td>
          </tr>
          <!-- 表格行，显示文件上传相关信息 -->
          <tr>
            <td>文件上传</td>
            <td>FastDFS</td>
          </tr>
        </table>
      </div>
    </div>
    <!-- 开发者信息区域，展示开发者的相关信息 -->
    <div class="Statistics">
      <!-- 开发者信息区域的标题 -->
      <p>开发者信息</p>
      <!-- 表格容器 -->
      <div class="tabLine">
        <!-- 表格，用于展示开发者信息 -->
        <table class="tabcont">
          <!-- 表格行，显示开发者姓名 -->
          <tr>
            <td>开发者</td>
            <td>XX</td>
          </tr>
          <!-- 表格行，显示开发者邮箱 -->
          <tr>
            <td>Email</td>
            <td>XX@qq.com</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    // 组件的数据选项，定义组件内部使用的数据
    data() {
      return {
        // 从 Vuex 存储中获取当前登录用户的用户名
        admin: this.$store.state.userInfo.username,
        // 获取当前时间
        time: new Date(),
        // 统计数据对象，包含商品总量、用户总量、订单总量、评论总量和交易总量
        DataNum: {
          productTotalNum: 0, // 商品总量，初始值为 0
          userTotalNum: 0,    // 用户总量，初始值为 0
          orderTotalNum: 0,   // 订单总量，初始值为 0
          commentTotalNum: 0, // 评论总量，初始值为 0
          moneyTotalNum: 0    // 交易总量，初始值为 0
        },
        // 服务器状态，初始值为正常
        serverStatus: '正常',
        // 数据库连接状态，初始值为已连接
        dbConnectionStatus: '已连接'
      };
    },
    // 组件的生命周期钩子函数，在组件实例创建完成后立即调用
    created() {
      // 发送 GET 请求到 /utils/selectDataNum 接口，用于查询商品、用户、订单、评论和交易额的统计数据
      this.$axios.get('/utils/selectDataNum', {}).then(res => {
        // 将响应数据中的商品总量赋值给 DataNum 对象的 productTotalNum 属性
        this.DataNum.productTotalNum = res.data.productTotalNum;
        // 将响应数据中的用户总量赋值给 DataNum 对象的 userTotalNum 属性
        this.DataNum.userTotalNum = res.data.userTotalNum;
        // 将响应数据中的订单总量赋值给 DataNum 对象的 orderTotalNum 属性
        this.DataNum.orderTotalNum = res.data.orderTotalNum;
        // 将响应数据中的评论总量赋值给 DataNum 对象的 commentTotalNum 属性
        this.DataNum.commentTotalNum = res.data.commentTotalNum;
        // 将响应数据中的交易总量赋值给 DataNum 对象的 moneyTotalNum 属性
        this.DataNum.moneyTotalNum = res.data.moneyTotalNum;
      });
    },
    // 组件的方法选项，定义组件内部使用的方法
    methods: {
      // 获取系统信息的方法
      getSystemInfo() {
        // 发送 GET 请求到 /Badmin/getSystemInfo 接口，用于获取系统信息
        this.$axios.get('/Badmin/getSystemInfo').then(res => {
          // 将响应数据中的系统版本赋值给 getSystemVersion 属性
          this.getSystemVersion = res.data.data.systemVersion;
          // 将响应数据中的 IP 地址赋值给 getIPAddress 属性
          this.getIPAddress = res.data.data.ipAddress;
          // 将响应数据中的端口号赋值给 getPort 属性
          this.getPort = res.data.data.port;
          // 将响应数据中的内存信息转换为 GB 并保留两位小数后赋值给 getMemory 属性
          this.getMemory = (res.data.data.memory / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
          // 将响应数据中的 CPU 信息赋值给 getCPU 属性
          this.getCPU = res.data.data.cpu;
        });
      },
      // 获取浏览器信息的方法
      getBrowserInfo() {
        // 获取浏览器的用户代理字符串
        const ua = navigator.userAgent;
        // 初始化浏览器名称为 Unknown
        let browser = 'Unknown';
        // 判断用户代理字符串中是否包含 Firefox
        if (ua.indexOf('Firefox') > -1) {
          browser = 'Firefox';
        } 
        // 判断用户代理字符串中是否包含 Chrome
        else if (ua.indexOf('Chrome') > -1) {
          browser = 'Chrome';
        } 
        // 判断用户代理字符串中是否包含 Safari
        else if (ua.indexOf('Safari') > -1) {
          browser = 'Safari';
        } 
        // 判断用户代理字符串中是否包含 MSIE 或 Trident
        else if (ua.indexOf('MSIE') > -1 || ua.indexOf('Trident') > -1) {
          browser = 'IE';
        }
        // 返回检测到的浏览器名称
        return browser;
      },
      // 获取操作系统信息的方法
      getOSInfo() {
        // 获取浏览器的用户代理字符串
        const ua = navigator.userAgent;
        // 初始化操作系统名称为 Unknown
        let os = 'Unknown';
        // 判断用户代理字符串中是否包含 Windows
        if (ua.indexOf('Windows') > -1) {
          os = 'Windows';
        } 
        // 判断用户代理字符串中是否包含 Mac
        else if (ua.indexOf('Mac') > -1) {
          os = 'MacOS';
        } 
        // 判断用户代理字符串中是否包含 Linux
        else if (ua.indexOf('Linux') > -1) {
          os = 'Linux';
        }
        // 返回检测到的操作系统名称
        return os;
      }
    }
  };
</script>

<style>
  /* 容器样式，设置页面主容器的样式 */
  .containerIndex{
    height: 100%;
    /* 背景颜色注释掉了，若需要可取消注释 */
    /* background-color: #FFFFFF; */
  }

  /* 欢迎区域样式，设置欢迎信息所在区域的样式 */
  .welcome{
    /* 内边距，上下 5px，左右 20px */
    padding: 5px 20px;
    /* 行高 */
    line-height: 40px;
    /* 字体大小 */
    font-size: 12px;
    /* 背景颜色 */
    background-color: #FFFFFF;
  }

  /* 欢迎区域内段落样式 */
  .welcome p{
    background-color: #EEEEEE;
    /* 左内边距 */
    padding-left: 10px;
    /* 内边距，上下 10px，左右 15px */
    padding: 10px 15px;
    /* 左侧边框，宽度 4px，颜色为 #409EFF */
    border-left: 4px solid #409EFF;
  }

  /* 欢迎区域内 span 元素样式 */
  .welcome span{
    /* 右侧外边距 */
    margin-right: 40px;
  }

  /* 统计区域样式，设置统计信息所在区域的样式 */
  .Statistics{
    /* 顶部外边距 */
    margin-top: 10px;
    /* 底部内边距 */
    padding-bottom: 10px;
    background-color: #FFFFFF;
  }

  /* 统计区域内段落样式 */
  .Statistics p{
    /* 上下外边距 */
    margin: 5px 0;
    /* 内边距 */
    padding: 10px;
    /* 字体颜色 */
    color: #333333;
    font-size: 14px;
  }

  /* 统计区域内无序列表样式 */
  .Statistics ul{
    /* 使用 flex 布局 */
    display: flex;
    /* 内边距 */
    padding: 5px 10px;
    /* 顶部边框 */
    border-top: 1px solid #F6F6F6;
  }

  /* 统计区域内列表项样式 */
  .Statistics ul li{
    /* 弹性布局子项的伸缩性 */
    flex: 1;
    /* 外边距 */
    margin: 5px;
    color: #999999;
    font-size: 13px;
    /* 鼠标指针样式，显示为手型 */
    cursor: pointer;
    /* 顶部内边距 */
    padding-top: 20px;
    /* 边框圆角 */
    border-radius: 10px;
    background-color: #F8F8F8;
    /* 文本对齐方式 */
    text-align-last: center;
    /* 过渡效果，所有属性变化在 0.3 秒内完成 */
    transition:all 0.3s;
  }

  /* 统计区域内列表项中段落样式 */
  .Statistics ul li p{
    font-size: 25px;
    color: #409eff;
  }

  /* 统计区域内列表项鼠标悬停时的样式 */
  .Statistics ul li:hover{
    background-color: #cfcfcf;
  }

  /* 表格行区域样式，设置表格上方区域的样式 */
  .tabLine{
    /* 顶部内边距 */
    padding-top: 20px;
    /* 底部内边距 */
    padding-bottom: 10px;
    border-top: 1px solid #F6F6F6;
  }

  /* 表格样式 */
  .tabcont{
    /* 表格宽度 */
    width: 98%;
    color: #666;
    /* 水平居中 */
    margin: auto;
    font-size: 12px;
    /* 单元格间距 */
    border-spacing: 1;
    /* 合并单元格边框 */
    border-collapse: collapse;
    /* 左侧边框 */
    border-left: 1px solid #E6E6E6;
    /* 顶部边框 */
    border-top: 1px solid #E6E6E6;
  }

  /* 表格单元格样式 */
  .tabcont td{
    line-height: 40px;
    /* 左内边距 */
    padding-left: 15px;
    /* 右侧边框 */
    border-right: 1px solid #E6E6E6;
    /* 底部边框 */
    border-bottom: 1px solid #E6E6E6;
  }

  /* 表格中第一个单元格样式 */
  .tabcont td:first-child{
    width: 400px;
  }

  /* 表格行样式 */
  .tabcont tr{
    cursor: pointer;
    transition:all 0.3s;
  }

  /* 表格行鼠标悬停时的样式 */
  .tabcont tr:hover{
    background-color: #F2F2F2;
  }
</style>

<template>
  <!-- 仪表盘容器，包裹整个页面内容 -->
  <div class="dashboard-container">
    <!-- 欢迎区域，展示系统概览相关信息 -->
    <div class="dashboard-section">
      <!-- 区域头部，包含图标和标题 -->
      <div class="section-header">
        <!-- Element UI 图标，显示主页图标 -->
        <i class="el-icon-s-home"></i>
        <!-- 区域标题 -->
        <span>系统概览</span>
      </div>
      <!-- 卡片网格布局，用于排列信息卡片 -->
      <div class="card-grid">
        <!-- 高亮信息卡片，显示欢迎登录的管理员信息 -->
        <div class="info-card highlight-card">
          <!-- 卡片内容容器 -->
          <div class="card-content">
            <!-- 图标包装器，用于显示图标 -->
            <div class="icon-wrapper">
              <!-- Element UI 图标，显示用户图标 -->
              <i class="el-icon-user"></i>
            </div>
            <!-- 信息内容容器 -->
            <div class="info-content">
              <!-- 显示管理员名称 -->
              <div class="value">{{admin}}</div>
              <!-- 显示提示信息 -->
              <div class="label">欢迎登录</div>
            </div>
          </div>
        </div>
        <!-- 信息卡片，显示当前时间 -->
        <div class="info-card">
          <div class="card-content">
            <div class="icon-wrapper">
              <!-- Element UI 图标，显示时间图标 -->
              <i class="el-icon-time"></i>
            </div>
            <div class="info-content">
              <!-- 显示当前时间 -->
              <div class="value">{{time}}</div>
              <!-- 显示标签 -->
              <div class="label">当前时间</div>
            </div>
          </div>
        </div>
        <!-- 信息卡片，显示服务器状态 -->
        <div class="info-card">
          <div class="card-content">
            <div class="icon-wrapper">
              <!-- Element UI 图标，显示云图标 -->
              <i class="el-icon-cloudy"></i>
            </div>
            <div class="info-content">
              <!-- 显示服务器状态 -->
              <div class="value">{{serverStatus}}</div>
              <!-- 显示标签 -->
              <div class="label">服务器状态</div>
            </div>
          </div>
        </div>
        <!-- 信息卡片，显示数据库连接状态 -->
        <div class="info-card">
          <div class="card-content">
            <div class="icon-wrapper">
              <!-- Element UI 图标，显示链接图标 -->
              <i class="el-icon-link"></i>
            </div>
            <div class="info-content">
              <!-- 显示数据库连接状态 -->
              <div class="value">{{dbConnectionStatus}}</div>
              <!-- 显示标签 -->
              <div class="label">数据库连接状态</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计数据区域，展示各种统计信息 -->
    <div class="dashboard-section">
      <!-- 区域头部，包含图标和标题 -->
      <div class="section-header">
        <!-- Element UI 图标，显示数据折线图标 -->
        <i class="el-icon-data-line"></i>
        <!-- 区域标题 -->
        <span>数据统计</span>
      </div>
      <!-- 卡片网格布局，用于排列统计信息卡片 -->
      <div class="card-grid">
        <!-- 统计信息卡片，显示商品总量 -->
        <div class="info-card stats-card" v-ripple>
          <div class="card-content">
            <div class="icon-wrapper">
              <!-- Element UI 图标，显示商品图标 -->
              <i class="el-icon-goods"></i>
            </div>
            <div class="info-content">
              <!-- 显示商品总量 -->
              <div class="value">{{DataNum.productTotalNum}}</div>
              <!-- 显示标签 -->
              <div class="label">商品总量</div>
            </div>
          </div>
        </div>
        <!-- 统计信息卡片，显示用户总数 -->
        <div class="info-card stats-card" v-ripple>
          <div class="card-content">
            <div class="icon-wrapper">
              <!-- Element UI 图标，显示用户图标 -->
              <i class="el-icon-user"></i>
            </div>
            <div class="info-content">
              <!-- 显示用户总数 -->
              <div class="value">{{DataNum.userTotalNum}}</div>
              <!-- 显示标签 -->
              <div class="label">用户总数</div>
            </div>
          </div>
        </div>
        <!-- 统计信息卡片，显示评论数 -->
        <div class="info-card stats-card" v-ripple>
          <div class="card-content">
            <div class="icon-wrapper">
              <!-- Element UI 图标，显示聊天图标 -->
              <i class="el-icon-chat-line-round"></i>
            </div>
            <div class="info-content">
              <!-- 显示评论数 -->
              <div class="value">{{DataNum.commentTotalNum}}</div>
              <!-- 显示标签 -->
              <div class="label">评论数</div>
            </div>
          </div>
        </div>
        <!-- 统计信息卡片，显示交易额 -->
        <div class="info-card stats-card" v-ripple>
          <div class="card-content">
            <div class="icon-wrapper">
              <!-- Element UI 图标，显示金钱图标 -->
              <i class="el-icon-money"></i>
            </div>
            <div class="info-content">
              <!-- 显示交易额，前面添加人民币符号 -->
              <div class="value">¥ {{DataNum.moneyTotalNum}}</div>
              <!-- 显示标签 -->
              <div class="label">交易额</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 系统信息区域，展示系统的相关信息 -->
    <div class="dashboard-section">
      <!-- 区域头部，包含图标和标题 -->
      <div class="section-header">
        <!-- Element UI 图标，显示显示器图标 -->
        <i class="el-icon-monitor"></i>
        <!-- 区域标题 -->
        <span>系统信息</span>
      </div>
      <!-- 卡片网格布局，用于排列系统信息卡片 -->
      <div class="card-grid">
        <!-- 循环渲染系统信息卡片，根据 systemInfoCards 数组生成卡片 -->
        <div class="info-card system-card" v-for="(item, index) in systemInfoCards" :key="index">
          <div class="card-content">
            <div class="icon-wrapper">
              <!-- 根据数据绑定的图标类名显示图标 -->
              <i :class="item.icon"></i>
            </div>
            <div class="info-content">
              <!-- 显示系统信息的值 -->
              <div class="value">{{item.value}}</div>
              <!-- 显示系统信息的标签 -->
              <div class="label">{{item.label}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 开发者信息区域，展示开发者的相关信息 -->
    <div class="dashboard-section">
      <!-- 区域头部，包含图标和标题 -->
      <div class="section-header">
        <!-- Element UI 图标，显示用户图标 -->
        <i class="el-icon-user"></i>
        <!-- 区域标题 -->
        <span>开发者信息</span>
      </div>
      <!-- 卡片网格布局，用于排列开发者信息卡片 -->
      <div class="card-grid">
        <!-- 开发者信息卡片，显示开发者姓名 -->
        <div class="info-card contact-card">
          <div class="card-content">
            <div class="icon-wrapper">
              <!-- Element UI 图标，显示用户图标 -->
              <i class="el-icon-user"></i>
            </div>
            <div class="info-content">
              <!-- 显示开发者姓名 -->
              <div class="value">Yu</div>
              <!-- 显示标签 -->
              <div class="label">开发者</div>
            </div>
          </div>
        </div>
        <!-- 开发者信息卡片，显示联系邮箱 -->
        <div class="info-card contact-card">
          <div class="card-content">
            <div class="icon-wrapper">
              <!-- Element UI 图标，显示消息图标 -->
              <i class="el-icon-message"></i>
            </div>
            <div class="info-content">
              <!-- 显示联系邮箱 -->
              <div class="value">2992696713@qq.com</div>
              <!-- 显示标签 -->
              <div class="label">联系邮箱</div>
            </div>
          </div>
        </div>
        <!-- 开发者信息卡片，显示开发时间 -->
        <div class="info-card contact-card">
          <div class="card-content">
            <div class="icon-wrapper">
              <!-- Element UI 图标，显示日期图标 -->
              <i class="el-icon-date"></i>
            </div>
            <div class="info-content">
              <!-- 显示开发时间 -->
              <div class="value">2025年1月</div>
              <!-- 显示标签 -->
              <div class="label">开发时间</div>
            </div>
          </div>
        </div>
        <!-- 开发者信息卡片，显示技术栈 -->
        <div class="info-card contact-card">
          <div class="card-content">
            <div class="icon-wrapper">
              <!-- Element UI 图标，显示平台图标 -->
              <i class="el-icon-s-platform"></i>
            </div>
            <div class="info-content">
              <!-- 显示技术栈 -->
              <div class="value">Vue + Element UI</div>
              <!-- 显示标签 -->
              <div class="label">技术栈</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加页脚组件 -->
    <Footer />
  </div>
</template>

<style scoped>
/* 仪表盘容器样式 */
.dashboard-container {
  /* 内边距，上下左右均为 20px */
  padding: 20px;
  /* 背景颜色 */
  background: #f5f7fa;
  /* 最小高度为视口高度 */
  min-height: 100vh;
}

/* 仪表盘区域样式 */
.dashboard-section {
  /* 背景颜色 */
  background: #ffffff;
  /* 边框圆角 */
  border-radius: 12px;
  /* 内边距 */
  padding: 20px;
  /* 底部外边距 */
  margin-bottom: 20px;
  /* 阴影效果 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 卡片网格布局样式 */
.card-grid {
  /* 使用网格布局 */
  display: grid;
  /* 自动填充列，每列最小宽度 280px，最大宽度为 1fr */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* 网格项之间的间距 */
  gap: 20px;
}

/* 信息卡片样式 */
.info-card {
  /* 背景颜色 */
  background: #ffffff;
  /* 边框圆角 */
  border-radius: 12px;
  /* 内边距 */
  padding: 20px;
  /* 过渡效果，所有属性变化在 0.3 秒内完成 */
  transition: all 0.3s ease;
  /* 阴影效果 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  /* 定位方式 */
  position: relative;
}

/* 统计卡片样式 */
.stats-card {
  /* 渐变背景颜色 */
  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
  /* 文字颜色 */
  color: white;
}

/* 统计卡片内图标包装器样式 */
.stats-card .icon-wrapper {
  /* 半透明白色背景 */
  background: rgba(255, 255, 255, 0.2);
  /* 文字颜色 */
  color: white;
}

/* 统计卡片内标签和数值样式 */
.stats-card .label,
.stats-card .value {
  /* 强制文字颜色为白色 */
  color: white !important;
}

/* 系统信息卡片样式 */
.system-card {
  /* 背景颜色 */
  background: white;
}

/* 系统信息卡片内图标包装器样式 */
.system-card .icon-wrapper {
  /* 浅蓝色背景 */
  background: #e6f7ff;
  /* 文字颜色 */
  color: #1890ff;
}

/* 系统信息卡片内数值样式 */
.system-card .value {
  /* 文字颜色 */
  color: #262626;
}

/* 系统信息卡片内标签样式 */
.system-card .label {
  /* 文字颜色 */
  color: #8c8c8c;
}

/* 高亮卡片样式 */
.highlight-card {
  /* 渐变背景颜色 */
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
}

/* 高亮卡片内图标包装器样式 */
.highlight-card .icon-wrapper {
  /* 半透明白色背景 */
  background: rgba(255, 255, 255, 0.2);
  /* 文字颜色 */
  color: white;
}

/* 高亮卡片内标签和数值样式 */
.highlight-card .label,
.highlight-card .value {
  /* 强制文字颜色为白色 */
  color: white !important;
}

/* 联系信息卡片内图标包装器样式 */
.contact-card .icon-wrapper {
  /* 浅绿色背景 */
  background: #f6ffed;
  /* 文字颜色 */
  color: #52c41a;
}

/* 卡片内容样式 */
.card-content {
  /* 使用弹性布局 */
  display: flex;
  /* 垂直居中对齐 */
  align-items: center;
  /* 子元素之间的间距 */
  gap: 15px;
  /* 定位方式 */
  position: relative;
  /* 层叠顺序 */
  z-index: 1;
}

/* 图标包装器样式 */
.icon-wrapper {
  /* 宽度 */
  width: 48px;
  /* 高度 */
  height: 48px;
  /* 边框圆角 */
  border-radius: 12px;
  /* 使用弹性布局 */
  display: flex;
  /* 垂直居中对齐 */
  align-items: center;
  /* 水平居中对齐 */
  justify-content: center;
  /* 过渡效果，所有属性变化在 0.3 秒内完成 */
  transition: all 0.3s ease;
}

/* 图标包装器内图标样式 */
.icon-wrapper i {
  /* 字体大小 */
  font-size: 24px;
}

/* 信息内容样式 */
.info-content {
  /* 弹性伸缩比例 */
  flex: 1;
}

/* 数值样式 */
.value {
  /* 字体大小 */
  font-size: 20px;
  /* 字体粗细 */
  font-weight: 600;
  /* 底部外边距 */
  margin-bottom: 4px;
}

/* 标签样式 */
.label {
  /* 字体大小 */
  font-size: 14px;
}

/* 区域头部样式 */
.section-header {
  /* 使用弹性布局 */
  display: flex;
  /* 垂直居中对齐 */
  align-items: center;
  /* 底部外边距 */
  margin-bottom: 20px;
  /* 底部内边距 */
  padding-bottom: 15px;
  /* 底部边框 */
  border-bottom: 1px solid #f0f0f0;
}

/* 区域头部内图标样式 */
.section-header i {
  /* 字体大小 */
  font-size: 20px;
  /* 右侧外边距 */
  margin-right: 10px;
  /* 文字颜色 */
  color: #1890ff;
}

/* 区域头部内标题样式 */
.section-header span {
  /* 字体大小 */
  font-size: 16px;
  /* 字体粗细 */
  font-weight: 600;
  /* 文字颜色 */
  color: #262626;
}

/* 悬浮效果 */
.info-card:hover {
  /* 向上平移 5px */
  transform: translateY(-5px);
  /* 阴影效果 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 悬浮时图标包装器效果 */
.info-card:hover .icon-wrapper {
  /* 放大 1.1 倍 */
  transform: scale(1.1);
}

/* 统计卡片数值样式 */
.stats-card .value {
  /* 字体大小 */
  font-size: 24px;
  /* 字体粗细 */
  font-weight: bold;
}

/* 确保所有文字可见 */
.info-card {
  /* 溢出内容可见 */
  overflow: visible;
}

.info-content {
  /* 溢出内容可见 */
  overflow: visible;
}

.value, .label {
  /* 溢出内容可见 */
  overflow: visible;
  /* 不强制换行 */
  white-space: normal;
  /* 允许在单词内换行 */
  word-break: break-word;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  /* 卡片网格布局在小屏幕下变为单列 */
  .card-grid {
    grid-template-columns: 1fr;
  }

  /* 数值字体大小调整 */
  .value {
    font-size: 18px;
  }

  /* 图标包装器大小调整 */
  .icon-wrapper {
    width: 40px;
    height: 40px;
  }

  /* 图标字体大小调整 */
  .icon-wrapper i {
    font-size: 20px;
  }
}
</style>

<script>
// 引入页脚组件
import Footer from './footer.vue'

export default {
  // 注册组件
  components: {
    Footer
  },
  // 组件的数据选项
  data() {
    return {
      // 从 Vuex 存储中获取当前登录的管理员用户名
      admin: this.$store.state.userInfo.username,
      // 获取当前时间并格式化，去除秒数
      time: new Date().toLocaleString().replace(/:\d{2}$/, ''),
      // 统计数据对象
      DataNum: {
        productTotalNum: 0, // 商品总量，初始值为 0
        userTotalNum: 0,    // 用户总量，初始值为 0
        orderTotalNum: 0,   // 订单总量，初始值为 0
        commentTotalNum: 0, // 评论总量，初始值为 0
        moneyTotalNum: 0    // 交易总量，初始值为 0
      },
      // 系统版本信息，初始为空
      getSystemVersion: '',
      // 系统 IP 地址信息，初始为空
      getIPAddress: '',
      // 系统端口信息，初始为空
      getPort: '',
      // 当前页面的 URL 信息
      getUrl: window.location.href,
      // 当前登录用户信息，从 Vuex 存储中获取
      getUser: this.$store.state.userInfo.username,
      // 当前使用的浏览器信息，调用 getBrowserInfo 方法获取
      getBrowser: this.getBrowserInfo(),
      // 当前使用的操作系统信息，调用 getOSInfo 方法获取
      getOS: this.getOSInfo(),
      // 系统语言信息，从浏览器获取
      getLanguage: navigator.language,
      // 屏幕分辨率信息
      getResolution: `${window.screen.width}x${window.screen.height}`,
      // 当前窗口大小信息
      getScreen: `${window.innerWidth}x${window.innerHeight}`,
      // 系统内存信息，初始为空
      getMemory: '',
      // CPU 核数信息，初始为空
      getCPU: '',
      // 服务器状态信息，初始为正常
      serverStatus: '正常',
      // 数据库连接状态信息，初始为已连接
      dbConnectionStatus: '已连接'
    }
  },
  // 计算属性
  computed: {
    // 生成系统信息卡片的数据数组
    systemInfoCards() {
      return [
        { label: '系统版本', value: this.getSystemVersion, icon: 'el-icon-monitor' },
        { label: 'IP地址', value: this.getIPAddress, icon: 'el-icon-connection' },
        { label: '端口', value: this.getPort, icon: 'el-icon-connection' },
        { label: '当前路径', value: this.getUrl, icon: 'el-icon-location' },
        { label: '当前用户', value: this.getUser, icon: 'el-icon-user' },
        { label: '浏览器', value: this.getBrowser, icon: 'el-icon-orange' },
        { label: '操作系统', value: this.getOS, icon: 'el-icon-monitor' },
        { label: '系统语言', value: this.getLanguage, icon: 'el-icon-chat-dot-square' },
        { label: '屏幕分辨率', value: this.getResolution, icon: 'el-icon-full-screen' },
        { label: '当前窗口', value: this.getScreen, icon: 'el-icon-crop' },
        { label: '系统内存', value: this.getMemory, icon: 'el-icon-coin' },
        { label: 'CPU核数', value: this.getCPU + ' 核', icon: 'el-icon-cpu' }
      ]
    }
  },
  // 组件生命周期钩子，在实例创建完成后调用
  created() {
    // 发送请求获取商品、用户、订单、评论和交易额的统计数据
    this.$axios.get('/utils/selectDataNum', {}).then(res => {
      // 将响应数据中的商品总量赋值给 DataNum 对象的 productTotalNum 属性
      this.DataNum.productTotalNum = res.data.productTotalNum;
      // 将响应数据中的用户总量赋值给 DataNum 对象的 userTotalNum 属性
      this.DataNum.userTotalNum = res.data.userTotalNum;
      // 将响应数据中的订单总量赋值给 DataNum 对象的 orderTotalNum 属性
      this.DataNum.orderTotalNum = res.data.orderTotalNum;
      // 将响应数据中的评论总量赋值给 DataNum 对象的 commentTotalNum 属性
      this.DataNum.commentTotalNum = res.data.commentTotalNum;
      // 将响应数据中的交易总量赋值给 DataNum 对象的 moneyTotalNum 属性
      this.DataNum.moneyTotalNum = res.data.moneyTotalNum;
    });

    // 调用获取系统信息的方法
    this.getSystemInfo();

    // 每秒更新一次时间
    setInterval(() => {
      this.time = new Date().toLocaleString().replace(/:\d{2}$/, '');
    }, 1000);
  },
  // 组件的方法选项
  methods: {
    // 获取系统信息的方法
    getSystemInfo() {
      // 发送请求获取系统信息
      this.$axios.get('/Badmin/getSystemInfo').then(res => {
        // 将响应数据中的系统版本赋值给 getSystemVersion 属性
        this.getSystemVersion = res.data.data.systemVersion;
        // 将响应数据中的 IP 地址赋值给 getIPAddress 属性
        this.getIPAddress = res.data.data.ipAddress;
        // 将响应数据中的端口号赋值给 getPort 属性
        this.getPort = res.data.data.port;
        // 将响应数据中的内存信息转换为 GB 并保留两位小数后赋值给 getMemory 属性
        this.getMemory = (res.data.data.memory / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
        // 将响应数据中的 CPU 核数赋值给 getCPU 属性
        this.getCPU = res.data.data.cpu;
      });
    },
    // 获取浏览器信息的方法
    getBrowserInfo() {
      // 获取浏览器的用户代理字符串
      const ua = navigator.userAgent;
      // 初始化浏览器名称为 Unknown
      let browser = 'Unknown';
      // 判断是否为 Firefox 浏览器
      if (ua.indexOf('Firefox') > -1) {
        browser = 'Firefox';
      } 
      // 判断是否为 Chrome 浏览器
      else if (ua.indexOf('Chrome') > -1) {
        browser = 'Chrome';
      } 
      // 判断是否为 Safari 浏览器
      else if (ua.indexOf('Safari') > -1) {
        browser = 'Safari';
      } 
      // 判断是否为 IE 浏览器
      else if (ua.indexOf('MSIE') > -1 || ua.indexOf('Trident') > -1) {
        browser = 'IE';
      }
      // 返回检测到的浏览器名称
      return browser;
    },
    // 获取操作系统信息的方法
    getOSInfo() {
      // 获取浏览器的用户代理字符串
      const ua = navigator.userAgent;
      // 初始化操作系统名称为 Unknown
      let os = 'Unknown';
      // 判断是否为 Windows 操作系统
      if (ua.indexOf('Windows') > -1) {
        os = 'Windows';
      } 
      // 判断是否为 MacOS 操作系统
      else if (ua.indexOf('Mac') > -1) {
        os = 'MacOS';
      } 
      // 判断是否为 Linux 操作系统
      else if (ua.indexOf('Linux') > -1) {
        os = 'Linux';
      }
      // 返回检测到的操作系统名称
      return os;
    }
  }
}
</script>